<template>
    <div class="section-wrap">
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>单位名称</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               style="text-overflow: ellipsis;"
                               v-model="formData.DeptName">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章编号</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               v-model="formData.BrokenRuleNo">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <label>违章照片</label>
                </div>
                <div class="upload-wrap">
                    <upload v-if="formData.Images&&formData.Images.length>0"
                            :imgList="formData.Images"></upload>
                    <strong v-else
                            class="no-img">暂无图片</strong>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章类型</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="formData.BrokenRuleType">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章时间</label>
                </div>
                <div>
                    <p>{{formData.HappendDate?formData.HappendDate.split(' ')[0]:''}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章区域</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="formData.BreakArea">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章人员</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="formData.BreakPerson">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章单位</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               style="text-overflow: ellipsis;"
                               v-model="formData.BrokenDeptName">
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章班组</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="formData.HappendGroup">
                    </div>
                </group>
            </div>
            <div class="form-item-p">
                <div>
                    <label>违章描述</label>
                    <span @click="flag=!flag">{{flag ? "展开":"收缩"}}</span>
                    <p :class='flag ? "overWord":""'
                       style="line-height: 30px;">
                        {{formData.Description}}
                    </p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>记录人</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="formData.RecordPerson">
                    </div>
                </group>
            </div>
            <myMenu></myMenu>
        </div>
    </div>
</template>
<script type="text/javascript">
import upload from '@/commonComponents/upload/index'
import myMenu from '@/commonComponents/menu'
import { breakInfo } from '@/api/api'

export default {
    components: {
        upload,
        myMenu
    },
    data () {
        return {
            flag: true,
            formData: {},
            param: {
                allowPaging: true,
                data: 'e34bfe68-4b59-4eda-98ec-aa5901122c54',
                pageIndex: 0,
                pageSize: 1000
            }
        }
    },
    created () {
        this.param.data = this.$route.query.id
    },
    mounted () {
        this.dataArr()
    },
    methods: {
        // 主要数据
        dataArr () {
            breakInfo(this.param).then((res) => {
                console.log(res, 123)
                if (res.code === 0) {
                    this.formData = res.data
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

.form-section {
    .form-item-p {
        line-height: 55px;
        width: 100%;
        border-bottom: 1px solid #f0f0f2;
        margin-left: 20px;
        padding-right: 20px;
        font-size: 14px;
        color: #666;
        font-weight: 800;
        label {
            font-size: 14px;
            color: #666;
            font-weight: bold;
        }
        span {
            font-weight: 100;
            float: right;
            padding-right: 10px;
            color: #6a6a6a;
        }
        > p {
            width: 100%;
            line-height: 23px;
            color: #696969;
            margin-bottom: 20px;
        }
        p.overWord {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
    }
}
</style>
